<template>
  <div class="content">
    <el-form v-model="form" inline>
      <el-form-item label="开始时间">
        <el-date-picker
          type="datetime"
          placeholder="选择开始时间"
          v-model="form.startTime"
          size="mini"
          :picker-options="pickerOptions0"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间">
        <el-date-picker
          type="datetime"
          placeholder="选择结束时间"
          v-model="form.endTime"
          size="mini"
          :picker-options="pickerOptions0"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini" @click="query">查询</el-button>
      </el-form-item>
    </el-form>
    <p class="data" v-show="show">暂无数据</p>

    <div id="ComparisonAutomation" style="height: 73vh"></div>
  </div>
</template>

<script>
import echarts from "echarts";
import moment from "moment";
import { getLevelDataComparisonList } from "../../../../api/Monitoring";
export default {
  props: {
    node: Object,
  },
  name: "ComparisonAutomation",
  data() {
    return {
      shows: true,
      show: false,
      form: {
        endTime: moment().format("YYYY-MM-DD HH:mm:ss"),
        startTime: moment().subtract(7, "day").format("YYYY-MM-DD 00:00:00"),
      },
      pickerOptions0: {
        disabledDate(time) {
          return time.getTime() > Date.now(); //如果没有后面的-8.64e6就是不可以选择今天的
        },
      },
    };
  },
  methods: {
    query() {
      this.drawLine();
    },
    async drawLine() {
      this.shows = true;
      this.show = false;
      var myChart = echarts.init(
        document.getElementById("ComparisonAutomation")
      );
      myChart.showLoading();
      let queryData = {
        startTime: moment(this.form.startTime).format("YYYY-MM-DD HH:mm:ss"),
        endTime: moment(this.form.endTime).format("YYYY-MM-DD HH:mm:ss"),
      };
      const res = await getLevelDataComparisonList({
        endTime: queryData.endTime,
        startTime: queryData.startTime,
        monitorCode: this.node.monitorCode,
        monitorId: this.node.id,
      });
      console.log(res);
      var data = [];
      var theDate = [];
      var secondLevel = [];
      var firstLevel = [];
      var rengong = [];
      //先进行赋值
      if (res.resultCode == 200) {
        this.shows = true;
        this.show = false;
        for (let i = 0; i < res.parameter.dataComparisonAutoList.length; i++) {
          var obj1 = new Object();
          obj1.value = res.parameter.dataComparisonAutoList[i].data;
          data[i] = obj1;
          var obj2 = new Object();
          obj2.value = res.parameter.dataComparisonAutoList[i].theDate;
          theDate[i] = obj2;
          if (res.parameter.secondLevel !== null) {
            var obj3 = new Object();
            obj3.value = res.parameter.secondLevel;
            secondLevel[i] = obj3;
            secondLevel[i].value = secondLevel[i].value.toFixed(3);
          }
          if (res.parameter.firstLevel !== null) {
            var obj4 = new Object();
            obj4.value = res.parameter.firstLevel;
            firstLevel[i] = obj4;
            firstLevel[i].value = firstLevel[i].value.toFixed(3);
          }
        }
        data.forEach((item) => {
          item.value = Number(item.value).toFixed(3);
        });
        for (
          let j = 0;
          j < res.parameter.dataComparisonManualList.length;
          j++
        ) {
          var obj5 = new Object();
          obj5.value = res.parameter.dataComparisonManualList[j].data;
          rengong[j] = obj5;
          // console.log(rengong)
        }
        for (let x = 0; x < rengong.length; x++) {
          if (rengong[x].value !== null) {
            rengong[x].value = rengong[x].value.toFixed(3);
          }
        }
      } else if (res.resultCode == 204) {
        this.shows = false;
        this.show = true;
        this.$message({
          message: "暂无数据",
          offset: 450,
          duration: 1000,
        });
      }

      let option = {
        title: {
          left: "center",
          text: this.node.name + "人工与在线监测对比",
        },
        tooltip: {
          trigger: "axis",
          formatter(params) {
            let tip = params[0].name + "<br/>";
            for (let y = 0; y < params.length; y++) {
              tip +=
                params[y].marker +
                params[y].seriesName +
                " : " +
                params[y].value +
                " m<br/>";
            }
            return tip;
          },
        },
        color: ["#5599FF", "#33FF33", "#FF0000", "#FF7744"],
        legend: {
          itemHeight: 2,
          data: [
            {
              name: "在线监测",
              icon: "rect",
            },
            {
              name: "人工监测",
              icon: "rect",
            },
            {
              name: "一级预警",
              icon: "rect",
            },
            {
              name: "二级预警",
              icon: "rect",
            },
          ],
          top: 30,
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
          // right: "3.7%",
        },
        xAxis: [
          // {
          //   name: "时间",
          //   type: "value",
          //   max: 500,
          //   // nameTextStyle: {
          //   //   padding: [50, 0, 0, 0] // 四个数字分别为上右下左与原位置距离
          //   // },
          //   // nameLocation: "center",
          // },
          {
            type: "category",
            boundaryGap: false,
            data: theDate,
            name: "时间",
            nameLocation: "center",
            nameTextStyle: {
              padding: [15, 0, 0, 0], // 四个数字分别为上右下左与原位置距离
            },
          },
        ],
        yAxis: [
          {
            name: "长度(m)",
            type: "value",
            max: 500,
          },
          // {
          //   // name: "位移(mm)",
          //   type: "value",
          // },
        ],
        series: [
          {
            name: "在线监测",
            type: "line",
            yAxisIndex: 0,
            lineStyle: {
              color: "#5599FF",
              type: "solid",
            },
            data: data,
            connectNulls: true,
          },
          {
            name: "人工监测",
            type: "line",
            yAxisIndex: 0,
            lineStyle: {
              color: "#66DD00",
              type: "solid",
            },
            data: rengong,
            connectNulls: true,
          },
          {
            name: "一级预警",
            type: "line",
            yAxisIndex: 0,
            lineStyle: {
              color: "#FF0000",
              type: "solid",
            },
            data: firstLevel,
            connectNulls: true,
          },
          {
            name: "二级预警",
            type: "line",
            yAxisIndex: 0,
            lineStyle: {
              color: "#FF7744",
              type: "solid",
            },
            data: secondLevel,
            connectNulls: true,
          },
        ],
        grid: {
          y2: 80,
        },
      };
      myChart.hideLoading();
      myChart.setOption(option);
    },
  },
  mounted() {
    this.drawLine();
  },
};
</script>

<style scoped>
.content {
  height: 83vh;
  overflow: auto;
}
.data {
  text-align: center;
  font-size: 16px;
  margin-top: 20px;
}
#ComparisonAutomation {
  margin-top: 20px;
}
</style>
